import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import React from 'react';
import "./rightCol.css";
import {history} from 'umi';

class RightCol extends React.Component{
  constructor(props) {
    super(props);
    console.log("constructor");
  }

  onFinish=(values)=> {
    console.log("onFinish");
    console.log(values);
    // delete values.username;
    // const{username="",password=""}=values;
    // const arr=[1,2,3,4,5,6,7,8,9];
    // const [a1,a2,...rest]=arr;
    // console.log(rest);
    // const obj1={
    //   key1:"value1",
    //   key2: {
    //     code:0,
    //     msg:"123",
    //   },
    // }
    // const{key1={},key2={}}=obj1;
    // const{msg,code}=key2;
    // let url="http://localhost:8000/login?username=admin&password=123456";
    let url="http://1.94.134.166:8805/login?";
    url=url + "username=" + String(values.username);
    url=url + "&password=" + String(values.password);
    console.log(url);
    fetch(url,{method:'POST'})
      .then((response) => response.json())
      .then((res)=>{
        // {
        //   "code":0,
        //   "msg":"操作成功",
        //   "data":{
        //   "token_expiration":"2025-01-01 07:06:31",
        //     "userId":1,
        //     "username":"张三",
        //     "token":"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsInJvbGVzIjpbXSwibmlja25hbWUiOiJhZG1pbiIsImlhdCI6MTczNTYyODc5MSwiZXhwIjoxNzM1NzE1MTkxfQ.xb5p4vGHoi7s2BviRkwA8IhPsfv06s-Xwj0el8ktElx36xX6azgaZyBGRo0mJe5k_R8ojxccK7KYst5YYhGjHg"
        // }}
        const{code=0,data={},msg=""}=res;
        if(code!=0){
          message.error(msg);
          return;
        }
        const {token=""}=data;
        localStorage.setItem('Authorization',`Bearer `+token);
        message.info(msg)
        history.push('/Demo2');
      });
  }

  render(){
    console.log("render");
    return(
      <>
        <div id="login_title" className="login_title">XXXX管理系统</div>
        <div id="login_content" className="login_content">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              username:"admin",
              password:"123456"
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            >
              <Input
                size="large"
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请输入用户名!"
              />
            </Form.Item>

            <Form.Item
              name="password"
              label="密码"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
              hasFeedback
            >
              <Input.Password
                size="large"
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="请输入密码!"
              />
            </Form.Item>

            {/* <Form.Item> */}
            {/*  <Form.Item name="remember" valuePropName="checked" noStyle> */}
            {/*    <Checkbox>记住我</Checkbox> */}
            {/*  </Form.Item> */}

            {/*  <a className="login-form-forgot" href=""> */}
            {/*    忘记密码 */}
            {/*  </a> */}
            {/* </Form.Item> */}

            <Form.Item>
              <Button type="primary" htmlType="submit" className="btnLogin">
                登录
              </Button>
              <a href="">register now!</a>
            </Form.Item>

          </Form>
        </div>
      </>
    )
  }
}

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your Username!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your Password!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <a className="login-form-forgot" href="">
          Forgot password
        </a>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          Log in
        </Button>
      </Form.Item>
    </Form>
  );
};
export default RightCol;
